import React, { useState } from 'react';

import { authentication } from '@api/auth'

import { Modal, Toast } from 'antd-mobile';
import { AuthenticationStyle } from '../../style';
import { SmallButton } from '@style';
import { useStore } from 'react-redux';


const alert = Modal.alert;

const Application = () => {
  const store = useStore();
  const uniacid = store.getState().appConfig.uniacid;

  const [userName, setUserName] = useState('');
  const [AccountName, setAccountName] = useState('');
  const [bankType, setBankType] = useState(null);
  const [accountBank, setAccountBank] = useState('');
  const [cardNo, setCardNo] = useState('');


  return (
    <>
      <AuthenticationStyle>

        <div className="top flex-row">
          <div className="content">
            <p>欢迎来到火蝶甄品拼货系统</p>
            <p>让我们认识一下你吧！</p>
          </div>
        </div>

        <div className="type flex-column">
          <div className="item flex-row">
            <div className="left">
              <span> 经营者姓名 </span>
            </div>
            <div className="right">
              <input value={userName} onChange={e => { setUserName(e.target.value) }} type="text" placeholder='填写个体工商户营业执照上的经营者姓名' />
            </div>
          </div>

          <div className="item flex-row">
            <div className="left">
              <span> 开户名称</span>
            </div>
            <div className="right">
              <input value={AccountName} onChange={e => { setAccountName(e.target.value) }} type="text" placeholder='工商企业账户或营业执照法人账户' />
            </div>
          </div>

        </div>

        <div className="type flex-column">

          <div className="item flex-row" style={{
            justifyContent: 'space-between'
          }}>
            <div className="left">
              <span> 银行类型 </span>
            </div>
            <div className="right">
              <input
                onClick={() => {
                  alert(
                    '请选择银行类型',
                    '',
                    [
                      { text: '对公', onPress: () => { setBankType(1) } },
                      { text: '对私', onPress: () => { setBankType(2) } },
                      { text: '取消', onPress: () => { } },

                    ]
                  )
                }}
                value={ bankType === null ? '' : ( bankType === 1 ? '对公' : '对私')  }
                type="text"
                placeholder='请选择'
                readOnly={true}
                style={{
                  textAlign: "right"
                }}

              />
            </div>
          </div>

          <div className="item flex-row">
            <div className="left">
              <span> 开户银行 </span>
            </div>
            <div className="right">
              <input value={accountBank} onChange={e => { setAccountBank(e.target.value) }} type="text" placeholder='开户支行：如，中国工商银行和平里支行' />
            </div>
          </div>

          <div className="item flex-row">
            <div className="left">
              <span> 银行卡号</span>
            </div>
            <div className="right">
              <input value={cardNo} onChange={e => { setCardNo(e.target.value) }} type="number" placeholder='请填写银行卡号' />
            </div>
            <img style={{
              width: '.4rem',
              height: '.4rem'
            }}
              src="https://res.lexiangpingou.cn/images/826/2020/10/WNUiJ9TrsRIbU1R1n1ZzJP98rR15pP.png" alt=""
              onClick={() => {
                alert(
                  <h2
                    style={{
                      color: '#474747',
                      fontSize: '.48rem',
                      fontWeight: 'bold'
                    }}
                  >开户银行</h2>, <p
                    style={{
                      color: '#474747',
                      fontSize: '.32rem',
                      fontWeight: '500'
                    }}
                  >
                  收款指定账户，我们会给该账户汇入一笔随机金额对账户进行校验,确保账户正确，以免无法收到款项
                                </p>, [
                  { text: '我知道了' }
                ])
              }}
            />

          </div>

        </div>

        <SmallButton >
          <div className="bottom" onClick={ () => {  submit() }}>
            提交审核
            </div>
        </SmallButton>

      </AuthenticationStyle>
    </>
  )

  function submit(){
    if ( userName === "") {
      Toast.info('请填写姓名', 1)
    } else if (AccountName === "") {
      Toast.info('请填写开户名称', 1)
    } else if (bankType === null) {
      Toast.info('请选择银行类型', 1)
    } else if( accountBank === "") {
      Toast.info('请填写开户银行', 1)
    } else if( cardNo === "") {
      Toast.info('请填写银行卡号', 1)
    } else if( cardNo.length < 16 || cardNo.length > 19) {
      Toast.info('请核对银行卡号', 1)
    }else{
      
      let params = {
        uniacid: uniacid,
        uniname: userName,
        bank_name: AccountName,
        bank_style: bankType,
        bank_type: accountBank,
        bank_account: cardNo
      }

      authentication( params ).then( res => {
         if(res.status === 200){
           Toast.success(res.msg, 1)
           window.location.reload()
         }else{
           Toast.fail( res.msg )
           
         }
      })

    }
  }


}


export default Application